<template>
		<el-container class="chat-box" v-loading="isload"  element-loading-text="拼命加载中。。。。">
			<chat-box v-if="chatStore" :chat="chatStore" :flag="true" :myheight="myheight"></chat-box>
		</el-container>
</template>

<script>
	import ChatBox from "../components/chat/ChatBox.vue";
	export default {

		name: "chat",
		components: {
			ChatBox
		},
		data() {
			return {
				myheight: "140px",
				isload:true
			}
		},
		created(){
			if(!this.loading){
				setTimeout(() => {//延迟一秒关闭加载状态
					this.isload=false;
				}, 1000);
			}
		},
		methods: {
		},
		computed: {
			chatStore() {
				let data=JSON.parse(this.$route.params.data)
				let chats= this.$store.state.chatStore.chats;
				let reData=null;
				chats.forEach((m) => {
					if (m.targetId == data.index) {
						reData=m;
					}
				})
				for (let i = 0; i < chats.length; i++) {
					if (chats[i].targetId == data.index) {
						reData=chats[i];
						break;
					}
				}
				return 	reData;
			}
		}
	}
</script>

<style lang="scss">
	.chat-page {
		.chat-list-box {
			display: flex;
			flex-direction: column;
			border: #dddddd solid 1px;
			background: white;
			width: 3rem;

			.chat-list-header {
				padding: 3px 8px;
				line-height: 50px;
				border-bottom: 1px #ddd solid;
				
				.el-input__inner {
					border-radius: 10px !important;
					background-color: #F8F8F8;
				}
				
			}
			
			.chat-list-loadding{
				height: 50px;
				background-color: #eee;
				
				.chat-loading-box{
					height: 100%;
				}
			}
			
			.chat-list-items {
				flex: 1;
				background: #F8F8F8;
				margin: 0 3px;
			}
		}
	}
</style>